<template>
  <div class="call-box" v-show="show">
    <h2>电话服务</h2>
    <p class="phone">{{phone}}
      <br>{{callinUser.cShi}}</p>
    <p class="detail">
      {{callinUser.cName}}
      <br> 性别：{{callinUser.cSex}}
      <br> 等级：v{{callinUser.VipLevel}}
      <br> 呼入类型：{{type}}
      <br> 当前排队人数：{{length}}
      <br>
    </p>
    <p class="receive" v-if="0">
      <el-button type="primary" @click="handleReceiveCall">接起</el-button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      phone: '00000000000',
      callinUser: {
        cShi: '无',
        cName: '无',
        VipLevel: 0,
        cSex: '男'
      },
      type: '无',
      length: 0,
    }
  },
  computed: {
    wsdata() {
      return websocket.data
    },
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  watch: {
    wsdata: function(data) {
      // 呼入
      if (data.cmd == 'callin') {
        if (data.action == 'ring') {
          this.phone = data.phone
          this.type = '呼入'
          this.show = true
          // 添加通话提示信息
          this.$store.dispatch('updateCallInfo','响铃中')
        }
        if (data.action == 'call') {
          this.show = false
          websocket.zjid = data.id
        }
        if (data.action == 'noanswer') {
          websocket.callin = false
          websocket.pickup = false
          this.phone = '00000000000'
          this.show = false
          this.$toast({
            message: '未接结束通话'
          })
          // 添加通话提示信息
          this.$store.dispatch('updateCallInfo','通话未接通')
        }
        if (data.action == 'end') {
          websocket.callin = false
          websocket.pickup = false
          this.phone = '00000000000'
          this.show = false
          this.$toast({
            message: '结束通话'
          })
          // // 添加通话提示信息
          this.$store.dispatch('updateCallInfo','通话结束')
        }
        this.getMessage(data)
      }
      // 排队
      if (data.cmd == 'status') {
        if (data.action == 'openqueues') {
          this.length = data.count || 0;
        }
      }
    },
  },
  methods: {
    handleReceiveCall() {
      websocket.callin = true
      websocket.pickup = true
      websocket.WsSend('pickup');
    },
    async getMessage(o) {
      let { data } = await this.$get(this, {
        api: 'ajaxapi/callin.do', data: {
          adminid: this.userInfo.id,
          yhm: this.userInfo.usertel,
          department: this.userInfo.userGroupId,
          mobile: o.phone,
          callid: o.id,
          callinaction: o.action,
          recordfile: o.recordfile
        }
      })
      if (data.state === 0) {
        if (o.action == 'ring') {
          this.callinUser = data.content
        }
        if (o.action == 'call') {
          this.$toast({
            message: '开始通话'
          })
          // 添加通话提示信息
          this.$store.dispatch('updateCallInfo','通话已建立连接')
          // 更新挂机行为
          this.$store.dispatch('updateIsHangup',false)
          // 添加考虑当通话内容未提交时，有电话打进来
          const callMsg = {
            telMsg: data.content,
            leadInMsg: data.content,
            mobile: o.phone,
            callType: 'callin',
            curRecordFile: o.recordfile,
            createdTime: Date.now(),
            serviceForm: {
              que1: '',
              que2: '',
              content: '',
            }
          }

          // 新功能添加--通话详情标签页
          const tmpo = Object.assign([],this.$store.getters.callList)
          tmpo.data.push(callMsg)
          tmpo.curIndex++
          this.$store.dispatch('updateCallList', tmpo)
          //

          this.$store.dispatch('updateCallMsg', callMsg)
          websocket.pickup = true
          this.$router.push({ path: '/call-center/call-detail' })
        }
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
$color:#444;
$dftColor:#666;
h2 {
  margin-bottom: 30px;
  color: $color;
  font-size: 18px;
  font-weight: normal;
}

.phone {
  line-height: 28px;
  color: $color;
  font-size: 16px;
}

.detail {
  margin-top: 10px;
  line-height: 25px;
  color: $dftColor;
  font-size: 14px;
}

.receive {
  margin-top: 25px;
  .el-button {
    padding: 10px 45px;
  }
}

.call-box {
  width: 200px;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  padding: 20px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 20;
  box-shadow: 0 0 10px rgba(000, 000, 000, .5);
  border-radius: 10px;
}
</style>
